<template>
  <Dialog :title="dialogTitle" width="80%" v-model="dialogVisible">
    <el-table :data="dataSource" style="width: 100%; margin-bottom: 20px" row-key="id" border>
      <el-table-column prop="catalogName" label="标题" sortable>
        <template #default="{ row }">
          <div
            class="inline-flex items-center gap-2"
            v-show="editingId !== `${row.id}-catalogName`"
            @dblclick="($event) => handleEdit(row.id, 'catalogName', $event.target as HTMLDivElement)"
          >
            {{ row.catalogName }}
            <Icon
              @click="
                ($event) => handleEdit(row.id, 'catalogName', $event.currentTarget.parentNode)
              "
              icon="mingcute:edit-line"
            />
          </div>
          <el-input
            v-show="editingId === `${row.id}-catalogName`"
            class="inline-block"
            type="textarea"
            :autosize="{ minRows: 2, maxRows: 4 }"
            v-model="row.catalogName"
            @blur="editingId = null"
          />
        </template>
      </el-table-column>
      <el-table-column prop="catalogDesc" label="描述" sortable />
      <el-table-column prop="catalogStatus" label="状态" sortable>
        <template #default="scope">
          <el-tag class="ml-2" :type="statusFormatter(scope.row.catalogStatus).type">{{
            statusFormatter(scope.row.catalogStatus).text
          }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center">
        <template #default>
          <el-button link type="primary" v-hasPermi="['train:course:update']">
            添加子目录
          </el-button>
          <el-button link type="primary" v-hasPermi="['train:course:query']"> 挂载内容 </el-button>
          <el-button link type="danger" v-hasPermi="['train:course:delete']"> 删除 </el-button>
        </template>
      </el-table-column>
    </el-table>
  </Dialog>
</template>
<script setup lang="ts">
import { CatalogVO, CatalogTree, CatalogStatus, getListByCourseId } from '@/api/course/catalog'
import { catalogStatusDict } from '../common'
import { listToTree } from '@/utils/tree'

// const message = useMessage() // 消息弹窗
const dialogVisible = ref(false) // 弹窗的是否展示
const dialogTitle = ref('查看课程目录') // 弹窗的标题

const dataSource = ref<CatalogTree[]>([])
const editingId = ref<CatalogVO['id'] | null>(null)

const handleEdit = (id: string, colName: string, pEl: HTMLDivElement) => {
  const editInputEl = Array.from(pEl.nextSibling!.childNodes).find((n: HTMLElement) =>
    ['INPUT', 'TEXTAREA'].includes(n.tagName)
  ) as HTMLElement
  editingId.value = `${id}-${colName}`
  editInputEl &&
    nextTick(() => {
      editInputEl.focus()
    })
}

/** 表格项状态格式化  1 启用 2 禁用*/
const statusFormatter = (val: CatalogStatus) => {
  const status = catalogStatusDict.find((item) => item.value === val)
  return {
    type: status?.type,
    text: status?.label
  }
}

/** 打开弹窗 */
const open = async (id: string) => {
  dialogVisible.value = true
  const catalogList = await getListByCourseId(id)
  const catalogTree = listToTree<CatalogTree>(catalogList, {
    pid: 'parentId'
  })

  dataSource.value = catalogTree
}
defineExpose({ open }) // 提供 open 方法，用于打开弹窗
</script>
